<template>
  <div>
    <el-card class="box-card"
             v-for="(item,index) in myMessages"
             :key="index">
      <div slot="header"
           class="clearfix">
        <span>{{item.date}}</span>
        <div>
          <span>{{item.departure}}</span>
          <i class="iconfont icon-jiaotonggongju_jiaotonggongju-gongjiaoche"></i>
          <span>{{item.departure}}</span>
        </div>
        <el-button style="padding: 5px 0; width: 50px"
                   type="danger"
                   @click="tuipiao(index)">退票</el-button>
      </div>
      <el-descriptions class="margin-top"
                       :column="4"
                       :size="size">
        <el-descriptions-item label="出发日期">{{item.date}}</el-descriptions-item>
        <el-descriptions-item label="出发时间">{{item.begintime}}</el-descriptions-item>
        <el-descriptions-item label="出发地点">{{item.fromcity}}</el-descriptions-item>
        <el-descriptions-item label="票数">{{item.num}}</el-descriptions-item>
        <el-descriptions-item label="到达日期">{{item.enddate}}</el-descriptions-item>
        <el-descriptions-item label="达到时间">{{item.endtime}}</el-descriptions-item>
        <el-descriptions-item label="到达地点">{{item.tocity}}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      size: "",
      myMessages: '',
      // myMessages: [{

      //   date: '9月1号',
      //   number: '1',
      //   fromcity: '沈丘',
      //   departure: '沈丘南',
      //   destination: '洪山区',
      //   tocity: '武汉',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 50,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   exdate: '',
      //   exenddate: '',
      //   exbegintime: '',
      //   exendtime: '',
      //   date: '9月1日',
      //   enddate: '9月1日',
      //   number: '2',
      //   fromcity: '周口',
      //   departure: '周口南',
      //   destination: '新郑',
      //   tocity: '郑州',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }, {
      //   exdate: '',
      //   exenddate: '',
      //   exbegintime: '',
      //   exendtime: '',
      //   date: '9月1日',
      //   enddate: '9月1日',
      //   number: '3',
      //   fromcity: '周口',
      //   departure: '周口南',
      //   destination: '武汉',
      //   tocity: '洪山区',
      //   begintime: '10:20',
      //   endtime: '15:10',
      //   duringtime: '5小时',
      //   ticketvalue: 200,
      //   ticket: 100,
      //   num: 1,
      // }]
    };
  },
  created () {
    let guodu;//eslint-disable-line no-unused-vars
    guodu = localStorage.getItem('myMessages');
    this.myMessages = window.JSON.parse(guodu);
  },
  methods: {
    tuipiao (index) {
      this.myMessages.splice(index, 1);
      let guodata = window.JSON.stringify(this.myMessages);
      localStorage.setItem("myMessages", guodata)
      this.$message({
        type: "success",
        message: "删除成功!",
      });
    }
  }
};
</script>

<style>
.el-card__header {
  background-color: #ebeef5;
}
</style>
<style lang="scss" scoped>
// .clearfix:before,
// .clearfix:after {
//   display: table;
//   content: '';
// }
// .clearfix:after {
//   clear: both;
// }

.box-card {
  margin: 20px;
  border-radius: 10px;
  .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
    div {
      display: flex;
      align-items: center;
      i {
        margin: 0 20px;
      }
    }
  }
}
</style>
